<!DOCTYPE html>
<html>
<head>
    <title>Resistor Circuits</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="900" height="300"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';

        /**
         * Draws a resistor symbol (zigzag line).
         * @param {CanvasRenderingContext2D} ctx The canvas context.
         * @param {number} x The starting x-coordinate.
         * @param {number} y The center y-coordinate.
         * @param {number} w The width of the resistor symbol.
         * @param {number} h The height (amplitude) of the zigzag.
         */
        function drawResistor(ctx, x, y, w, h) {
            const half_h = h / 2;
            const seg_w = w / 6;
            ctx.moveTo(x, y);
            ctx.lineTo(x + seg_w, y - half_h);
            ctx.lineTo(x + 2 * seg_w, y + half_h);
            ctx.lineTo(x + 3 * seg_w, y - half_h);
            ctx.lineTo(x + 4 * seg_w, y + half_h);
            ctx.lineTo(x + 5 * seg_w, y - half_h);
            ctx.lineTo(x + w, y);
        }

        // --- Draw Circuit X (Left) ---
        ctx.beginPath();
        const y_mid_x = 150;
        const res_w_x = 60;
        const res_h_x = 30;
        const x1_x = 50, x2_x = x1_x + res_w_x, x3_x = x2_x + 30, x4_x = x3_x + res_w_x;
        const y_p_top_x = y_mid_x - 45;
        const y_p_bot_x = y_mid_x + 45;

        // Input wire and first resistor
        ctx.moveTo(20, y_mid_x);
        ctx.lineTo(x1_x, y_mid_x);
        drawResistor(ctx, x1_x, y_mid_x, res_w_x, res_h_x);

        // Wires to parallel block
        ctx.moveTo(x2_x, y_mid_x);
        ctx.lineTo(x3_x, y_mid_x);
        ctx.moveTo(x3_x, y_mid_x);
        ctx.lineTo(x3_x, y_p_top_x);
        ctx.moveTo(x3_x, y_mid_x);
        ctx.lineTo(x3_x, y_p_bot_x);

        // Parallel resistors
        drawResistor(ctx, x3_x, y_p_top_x, res_w_x, res_h_x);
        drawResistor(ctx, x3_x, y_p_bot_x, res_w_x, res_h_x);

        // Wires joining parallel block and output
        ctx.moveTo(x4_x, y_p_top_x);
        ctx.lineTo(x4_x, y_p_bot_x);
        ctx.moveTo(x4_x, y_mid_x);
        ctx.lineTo(x4_x + 50, y_mid_x);
        ctx.stroke();


        // --- Draw Circuit Y (Middle) ---
        ctx.beginPath();
        const x_start_y = 330, y_mid_y = 150, res_w_y = 55, res_h_y = 30;
        const x1_y = x_start_y + 40;
        const x2_y = x1_y + 10;
        const x3_y = x2_y + res_w_y;
        const x4_y = x3_y + 10;
        const x5_y = x4_y + res_w_y;
        const x_bot_start_y = x1_y + (x5_y - x1_y - res_w_y) / 2;
        const x_bot_end_y = x_bot_start_y + res_w_y;
        const y_top_y = y_mid_y - 50;
        const y_bot_y = y_mid_y + 50;
        
        // Input wire and split
        ctx.moveTo(x_start_y, y_mid_y);
        ctx.lineTo(x1_y, y_mid_y);
        ctx.moveTo(x1_y, y_mid_y);
        ctx.lineTo(x1_y, y_top_y);
        ctx.moveTo(x1_y, y_mid_y);
        ctx.lineTo(x1_y, y_bot_y);

        // Top branch
        ctx.moveTo(x1_y, y_top_y);
        ctx.lineTo(x2_y, y_top_y);
        drawResistor(ctx, x2_y, y_top_y, res_w_y, res_h_y);
        ctx.moveTo(x3_y, y_top_y);
        ctx.lineTo(x4_y, y_top_y);
        drawResistor(ctx, x4_y, y_top_y, res_w_y, res_h_y);
        ctx.moveTo(x5_y, y_top_y);

        // Bottom branch
        ctx.moveTo(x1_y, y_bot_y);
        ctx.lineTo(x_bot_start_y, y_bot_y);
        drawResistor(ctx, x_bot_start_y, y_bot_y, res_w_y, res_h_y);
        ctx.moveTo(x_bot_end_y, y_bot_y);
        ctx.lineTo(x5_y, y_bot_y);

        // Join and output wire
        ctx.moveTo(x5_y, y_top_y);
        ctx.lineTo(x5_y, y_bot_y);
        ctx.moveTo(x5_y, y_mid_y);
        ctx.lineTo(x5_y + 40, y_mid_y);
        ctx.stroke();


        // --- Draw Circuit Z (Right) ---
        ctx.beginPath();
        const x_start_z = 650, y_mid_z = 150, res_w_z = 80, res_h_z = 30;
        const x_bar1_z = x_start_z + 70;
        const x_bar2_z = x_bar1_z + res_w_z;
        const y_bar_top_z = y_mid_z - 70;
        const y_bar_bot_z = y_mid_z + 70;
        const y_res1_z = y_mid_z - 50;
        const y_res2_z = y_mid_z;
        const y_res3_z = y_mid_z + 50;

        // Input and output wires
        ctx.moveTo(x_start_z, y_mid_z);
        ctx.lineTo(x_bar1_z, y_mid_z);
        ctx.moveTo(x_bar2_z, y_mid_z);
        ctx.lineTo(x_bar2_z + 70, y_mid_z);

        // Vertical bars
        ctx.moveTo(x_bar1_z, y_bar_top_z);
        ctx.lineTo(x_bar1_z, y_bar_bot_z);
        ctx.moveTo(x_bar2_z, y_bar_top_z);
        ctx.lineTo(x_bar2_z, y_bar_bot_z);

        // Resistors
        drawResistor(ctx, x_bar1_z, y_res1_z, res_w_z, res_h_z);
        drawResistor(ctx, x_bar1_z, y_res2_z, res_w_z, res_h_z);
        drawResistor(ctx, x_bar1_z, y_res3_z, res_w_z, res_h_z);
        ctx.stroke();

    </script>
</body>
</html>